<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>电子名片</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/common-m.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <div class="gradient"></div>
    <div class="page-container">
      <div class="fixed-top">
        <!-- 头部 -->
        <header class="header flex center">
          <p class="page-title">电子名片</p>
          <img src="./images/icon-back.png" class="icon-back" />
        </header>
      </div>
      <!-- 名片 -->
      <section class="section-card flex center">
        <div class="button-box flex">
          <div class="button" onclick="rotateCard()">
            <img src="./images/icon-rotate.png" class="icon-rotate" />
          </div>
        </div>
        <div class="card-container">
          <!-- 正面  -->
          <div class="card-box card-front flex column between">
            <div class="card-top">
              <div class="flex align-end">
                <p class="text-name ellipsis">某某某某某某某某某某某某</p>
                <p class="text-position ellipsis">建筑工程师｜营销师</p>
              </div>
              <p class="text-company ellipsis">中铁四十三局第五分公司</p>
            </div>
            <div class="card-bottom w100">
              <div class="flex">
                <img src="./images/icon-phone.png" class="card-icon" />
                <p class="text text-phone ellipsis">18632123176</p>
              </div>
              <div class="flex align-start w100">
                <img
                  src="./images/icon-pos.png"
                  class="card-icon icon-address"
                />
                <p class="text text-address">
                  河北省 石家庄市 长安区河北省 石家庄市 长安区河北省 石家庄市
                  长安区河北省 石家庄市 长安区河北省
                </p>
              </div>
            </div>
          </div>
          <!-- 反面  -->
          <div class="card-box card-back flex column center">
            <p class="text-title">公司主营</p>
            <p class="text-desc ellipsis-6">
              采购230w-采购230w-680w单、多晶正A级组件、降级组件、低债组件、客退组件、拆卸组件、层压件、工程剩余组件、报废组件、电站全套报价
            </p>
          </div>
        </div>
      </section>
      <section class="section-form">
        <div class="form-box">
          <div class="section-title">基本信息</div>
          <div class="line"></div>
          <div class="form-item flex">
            <label for="name">
              姓名
              <span class="text-red">*</span>
            </label>
            <input
              type="text"
              id="name"
              value="某某某"
              placeholder="请输入姓名"
              maxlength="20"
              disabled
            />
          </div>
          <div class="form-item flex">
            <label for="position">
              职位
              <span class="text-red">*</span>
            </label>
            <input
              type="text"
              id="position"
              value="建筑工程师｜营销师"
              placeholder="请输入职位"
              maxlength="50"
            />
          </div>
          <div class="form-item flex">
            <label for="company">
              公司
              <span class="text-red">*</span>
            </label>
            <input
              type="text"
              id="company"
              value="中铁四十三局第五分公司"
              placeholder="请输入公司"
              maxlength="50"
              disabled
            />
          </div>

          <div class="form-item flex align-start">
            <label for="business">
              公司主营
              <span class="text-red">*</span>
            </label>
            <textarea
              id="business"
              placeholder="请输入公司主营(30字)"
              maxlength="30"
              disabled
            >
680w单、多晶正A级组件、降级组件、低债组件、客退组件、拆卸组件、层压件、工程剩余组件、报废组件、电站全套报价</textarea
            >
          </div>
        </div>
        <div class="form-box">
          <div class="section-title">联系方式</div>
          <div class="line"></div>
          <div class="form-item flex">
            <label for="phone">
              电话
              <span class="text-red">*</span>
            </label>
            <input
              type="text"
              id="phone"
              value="18632123176"
              placeholder="请输入电话"
              disabled
            />
          </div>
          <div class="form-item flex">
            <label for="industry"> 地址 </label>
            <input
              type="text"
              id="industry"
              value="河北省 石家庄市 长安区"
              placeholder="请选择地址"
              disabled
            />
          </div>
        </div>
        <div class="button button-blue button-send" onclick="save()">保存</div>
      </section>
    </div>

    <script src="../common/js/jquery-3.2.1.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
